<template>
  <div class="shop">
    <shopHeader></shopHeader>
    <div class="shop-tab-container">
      <div class="shop-tab-left" @click="selectd = 'shopMenuview', index = 0">
        <span :class="{'tab-left-span': 0 == index}">商品</span>
      </div>
      <div class="shop-tab-right" @click="selectd = 'shopEvaluate', index = 1">
        <span :class="{'tab-left-span': 1 == index}">评价</span>
      </div>
    </div>
    <component v-bind:is="selectd"></component>
    <transition name="fade">
      <shopDetails v-if="hideDetail"></shopDetails>
    </transition>

  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import shopHeader from './shopHeader.vue'
import shopMenuview from './shopMenuview.vue'
import shopEvaluate from './shopEvaluate.vue'
import shopDetails from './shopDetails.vue'
export default {
  name: 'shop',
  data () {
    return {
      selectd: 'shopMenuview',
      selectdList: [ 'shopMenuview', 'shopEvaluate' ],
      index: 0
    }
  },
  components: {
    shopHeader,
    shopMenuview,
    shopEvaluate,
    shopDetails
  },
  methods: {
    ...mapMutations({
      hideTab: 'HIDETAB',
      getShopDetails: 'SHOPDETAILSLIST',
      getMenuDetails: 'SHOPDETAILSMENU'
    })
  },
  mounted: function () {
    this.hideTab()
    this.getShopDetails(this.$route.params.id)
    this.getMenuDetails(this.$route.params.id)
    console.log(this.$route.params.id)
  },
  computed: {
    hideDetail: function () {
      return this.$store.state.hideDetail
    }
  }

}
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem.scss';
  @import '../assets/css/animate.min.css';
  .shop{
    .shop-header{
      position: relative;
      padding-bottom: px2rem(60);
      color: #fff;
      font-size: px2rem(22);
      background-color: rgba(119,103,137,.43);
      .shop-nav{
        position: relative;
        padding: px2rem(8) px2rem(20);
        a{
          text-decoration: none;
          display: inline-block;
          width:px2rem(50);
          height:px2rem(50);
          text-align: center;
          line-height:px2rem(50);
          svg{
            width:px2rem(50);
            height:px2rem(50);
          }
        }
      }
      .shop-header-main{
        display: flex;
        position: relative;
        img{
          width: px2rem(130);
          height: px2rem(130);
          border: 1px solid #fff;
          border-radius: px2rem(8);
          margin: 0 px2rem(20);
        }
        .shop-header-content{
          flex: 1;
          display: block;
          width: 0;
          padding-right: px2rem(10);
          h2{
            margin: 0;
            font-size: px2rem(35);
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .shop-header-p{
            white-space: nowrap;
            height: px2rem(50);
            line-height: px2rem(50);
            span:nth-child(1){
              &:after{
                content: " / ";
                opacity: 0.5;
              }
            }
            span:nth-child(2){
              &:after{
                content: " / ";
                opacity: 0.5;
              }
            }
          }
          .shop-header-notice{
            height: px2rem(50);
            line-height: px2rem(50);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .shop-header-svg{
          position:absolute;
          top: 50%;
          transform: translateY(-50%);
          right: px2rem(10);
          height: px2rem(25);
          width: px2rem(50);
          fill: #fff;
        }
      }
      .shop-header-btm{
        position: absolute;
        left: px2rem(20);
        right: px2rem(20);
        bottom: px2rem(20);
        .header-btm-left{
          display: flex;
          align-items: center;
          padding-right: px2rem(96);
          .header-btm-i{
            margin-right: px2rem(10);
            font-size: px2rem(20);
            font-style: normal;
            height: px2rem(22);
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid;
            border-radius:  px2rem(3);
            background-color: rgb(112, 188, 70);
            color: rgb(255, 255, 255);
            border-color: rgb(112, 188, 70);
            line-height: 1;
          }
          .header-btm-span{
              flex: 1;
              display: block;
              width: 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
          }
        }
        .header-btm-right{
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .shop-tab-container{
      line-height: px2rem(90);
      display: flex;
      background-color: #fff;
      .shop-tab-left,.shop-tab-right{
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        width: 0;
        text-align: center;
        font-size: px2rem(28);
        color: #666;
        border-bottom: 1px solid #ddd;
        .tab-left-span{
          position: relative;
          color: #3190e8;
          &:after{
            content: "";
            position: absolute;
            bottom: px2rem(-12);
            left: px2rem(-5);
            right: px2rem(-5);
            height: px2rem(4);
            background-color: #3190e8;
            border-radius: px2rem(3);
          }
        }
      }
    }
    .menuview-2iJo3{
      .menuview-17K3g{
        height: 100%;
        padding-bottom: px2rem(96);
        background-color: #fff;
        .menuview-i6fQ3{
          display: flex;
          height: 100%;
          .menuview-ul{
            width: px2rem(170);
            overflow-y: auto;
            height: 100%;
            background-color: #f8f8f8;
            li{
              position: relative;
              padding: px2rem(35) px2rem(15);
              border-bottom: 1px solid #ededed;
              font-size: px2rem(26);
              color: #666;
            }
            .menuview-ul-li{
              background-color: #fff;
              border-right-color: #fff;
              font-weight: bolder;
              .menuview-ul-span{
                &:after{
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 0;
                  bottom: 0;
                  width: px2rem(6);
                  background-color: #3190e8;
                }
              }
            }
          }
          .menuview-section{
            position: relative;
            height: 100%;
            flex: 1;
            display: block;
            width: 0;
            .scroller{
              height: 100%;
              overflow-y: auto;
              dl{
                dt{
                  position: relative;
                  padding: px2rem(15) px2rem(20);
                  background-color: #f1f1f1;
                  .category-title{
                    display: flex;
                    align-items: flex-end;
                    overflow: hidden;
                    strong{
                      margin-right: px2rem(10);
                      font-weight: 700;
                      font-size: px2rem(28);
                      color: #666;
                      -webkit-box-flex: 0;
                      -ms-flex: none;
                      flex: none;
                    }
                    .category-description{
                      flex: 1;
                      display: block;
                      width: 0;
                      color: #999;
                      font-size: px2rem(20);
                      white-space: nowrap;
                      overflow: hidden;
                    }
                  }
                  .category-more{
                    .more-span{
                      position: absolute;
                      right: 0;
                      top: 0;
                      bottom: 0;
                      width: px2rem(70);
                      z-index: 2;
                      text-align: center;
                      line-height: 1;
                      color: #999;
                    }
                    .popup{
                      position: absolute;
                      background-color: #39373a;
                      opacity: .97;
                      transform: scale(1);
                      transform-origin: top right;
                      width: 63%;
                      right: px2rem(10);
                      z-index: 3;
                      color: #eee;
                      font-size: px2rem(24);
                      border-radius: px2rem(24);
                      padding: px2rem(18) px2rem(20);
                      transition: all .3s ease;
                      cursor: pointer;
                      &:after{
                        content: "";
                        position: absolute;
                        top: 0;
                        transform: translateY(-100%);
                        right: px2rem(20);
                        border: px2rem(10) solid transparent;
                        border-bottom-color: #39373a;
                      }
                    }
                  }
                }
                dd{
                  position: relative;
                  background-color: #fff;
                  margin: 0;
                  padding: px2rem(30) px2rem(20);
                  margin-bottom: 1px;
                  display: flex;
                  min-height: px2rem(220);
                  .foodimg{
                    margin-right: 4%;
                    display: block;
                    vertical-align: top;
                    img{
                      width:px2rem(140);
                      height: px2rem(140);
                      border-radius:px2rem(6);
                    }
                  }
                  .foodinfo{
                    position: relative;
                    padding-bottom: px2rem(50);
                    header{
                      line-height: 1.1;
                      overflow: hidden;
                      display: flex;
                      justify-content: space-between;
                      .foodinfo-title{
                        display: inline-block;
                        max-width:px2rem(300);
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: px2rem(30);
                        color: #333;
                        font-weight: 700;
                      }
                      aside{
                        line-height: px2rem(24);
                        margin-left: px2rem(18);
                        flex: none;
                        .foodinfo-sign{
                          display: inline-block;
                          vertical-align: middle;
                          padding: px2rem(3) px2rem(5);
                          line-height: 100%;
                          text-align: center;
                          border: 1px solid currentColor;
                          font-size: px2rem(16);
                          border-radius: px2rem(20);
                        }
                      }
                    }
                    .fooddescription{
                      margin: px2rem(10) 0;
                      font-size: px2rem(19);
                      color: #999;
                    }
                    .foodsales{
                      margin:  px2rem(13) 0;
                      color: #666;
                      font-size: px2rem(22);
                      line-height: 1;
                    }
                    .foodactivity{
                      font-size: px2rem(22);
                      transform: scale(0.8);
                      transform-origin: left;
                      color: #f07373;
                      white-space: nowrap;
                      span{
                        display: inline-block;
                        border: 1px solid currentColor;
                        padding: 0 px2rem(5);
                      }
                    }
                    .foodprice{
                      position: absolute;
                      left: 0;
                      bottom: 0;
                      font-weight: 700;
                      font-size: px2rem(32);
                      line-height: px2rem(32);
                      color: #f60;
                      &:before{
                        font-weight: 400;
                        content: "\A5";
                        font-size: px2rem(22);
                        display: inline-block;
                      }
                      .foodprice-qi{
                        margin-left:px2rem(4);
                        font-size: px2rem(24);
                        color: #666;
                        font-weight: 400;
                      }
                    }
                    .cartbutton{
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      height: px2rem(54);
                      a{
                        display: inline-block;
                        padding: px2rem(4);
                        vertical-align: middle;
                        text-decoration: none;
                        svg{
                          width: px2rem(40);
                          height:  px2rem(40);
                          fill: #3190e8;
                        }
                      }
                      span{
                        display: inline-block;
                        vertical-align: middle;
                        text-align: center;
                        color: #666;
                        font-size: px2rem(28);
                        min-width: px2rem(30);
                        max-width: px2rem(150);
                        overflow: hidden;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .fade-enter-active {
      animation: big-in 0.5s;
  }
  .fade-leave-active {
      animation: big-out 0.5s;
  }
  @keyframes big-in {
      0% {
        transform: translateX(px2rem(750));
      }
      100% {
        transform: translateX(px2rem(0));
      }
  }
  @keyframes big-out {
      0% {
       transform: translateX(px2rem(0));
      }
      100% {
        transform: translateX(px2rem(750));
      }
  }
</style>